<template>
  <div>
    <el-table ref="tableRef" :data="table.tableData" @sort-change="handleSortChange" :border="table.border" :stripe="table.stripe" :height="table.height">
      <!--    索引列-->
      <el-table-column v-if="table.index" type="index" :label="table.index_label || '#'"></el-table-column>
      <!--    多选框-->
      <el-table-column v-if="table.selection" type="selection"></el-table-column>
      <template v-for="item in table.thead">
        <!--      v-slot-->
        <el-table-column :key="item.field" :prop="item.prop" :label="item.label" :align="item.align" :width="item.width" v-if="item.columnType === 'slot'" :fixed="item.fixed">
          <template slot-scope="scope">
            <slot :name="item.slotName" :row="scope.row"></slot>
          </template>
        </el-table-column>
        <!--      函数处理-->
        <el-table-column :key="item.field" :prop="item.prop" :sortable="item.sortable" :label="item.label" :width="item.width" v-else-if="item.columnType === 'function'" :fixed="item.fixed">
          <template slot-scope="scope">
            <div v-html="item.callback(scope.row)"></div>
          </template>
        </el-table-column>
        <!--      文本数据渲染-->
        <el-table-column :key="item.field" :prop="item.prop" :sortable="item.sortable" :label="item.label" :width="item.width" v-else :fixed="item.fixed"></el-table-column>
      </template>
    </el-table>
    <el-pagination
      :align="table.pagination.align || align"
      v-if="table.pagination"
      @size-change="table.pagination.handleSizeChange"
      @current-change="table.pagination.handleCurrentChange"
      :current-page="table.pagination.currentPage || currentPage"
      :page-sizes="table.pagination.pageSizes || pageSizes"
      :page-size="table.pagination.pageSize || pageSize"
      :layout="table.pagination.layout || layout"
      :total="table.pagination.total || total">
    </el-pagination>
  </div>
  
</template>

<script>
  
  export default {
    name: 'MyTable',
    props: {
      table: {
        type: Object,
        default: () => {}
      }
    },
    data: () => {
      return {
        pageSizes: [5, 10, 20, 50],
        pageSize: 5,
        layout: 'total, sizes, prev, pager, next, jumper',
        currentPage: 1,
        total: 0,
        align: 'left'
      }
    },
    created() {
    },
    
    methods: {
      // 排序改变
      handleSortChange({prop,order}) {
        if (!order) return
        this.table.sortChange && this.table.sortChange(prop,order)
      },
      
      // 获取选中项
      getTableSelections() {
        return this.$refs.tableRef.selection
      }
    }
  }
</script>
<style lang="scss" scoped>
</style>